<template>
	<view class="Global">
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

		<scroll-view scroll-y="true" class="contentOut" :style="'height:'+scrollViewHeight+'px'">

			<view class="contentOutInner">


				<view class="contentImgAddBg" @click="chooseImage()" v-if="imgArr.length==0">
					<image class="contentImgAdd" src="../../../static/gongzuotai/shangchuan.png" mode="">
					</image>


				</view>
				<view class="contentImgAddBg" @click="chooseImage()" v-if="imgArr.length>0"
					v-for="(item,index) in imgArr">

					<image class="contentImg2" :src="apiUrl+item" mode="">
					</image>
					<view class="contentImgDeleteBg" @click.stop="deleteImg(index)">
						<image class="contentImgDelete" src="../../../static/gongzuotai/delete.png" mode="">
						</image>
					</view>
				</view>
				<text class="contentText">款式图</text>




				<view class="contentListOut">




					<view class="listContent" v-for="(item,index) in listData">

						<view class="line"></view>


						<view class="contentItem" v-if="item.type==0">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">{{item.title}}</text>
								<text class="contentItemTextLeftStart">*</text>
							</view>
							<input @input="goStyleUrl" class="contentItemTextRight" type="text" :placeholder="item.title" v-if="item.tableFie=='styleName'" :disabled="item.tableFie=='styleName'"
								:value="item.Value" />
              <input v-else @input="onInputAccount(index,$event)" class="contentItemTextRight" type="text" :placeholder="item.title"
                     :value="item.Value" />
							<image class="contentItemRightContentImg" src="/static/gongzuotai/xia_jiantou@2x.png"
								mode="" v-if="item.tableFie=='styleName'" @click="goStyleUrl">
							</image>

						</view>


						<view class="contentItem2" v-if="item.type==1">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">{{item.title}}</text>
								<!-- <text class="contentItemTextLeftStart">*</text> -->
							</view>
							<input @input="onInputAccount(index,$event)" class="contentItemTextRight" type="text" :placeholder="item.title"
								:value="item.Value" />

						</view>
						<view class="contentItem2" v-if="item.type==2">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">{{item.title}}</text>
							</view>
							<text class="contentItemTextLeft">{{item.Value}}</text>
						</view>

					</view>

					<view class="line"></view>

					<!-- 颜色开始 -->

					<view class="colorContent">

						<view class="colorContentText">
							<text class="colorContentTextTip">颜色</text>
							<text class="colorContentTextTipStart">*</text>
						</view>


						<scroll-view scroll-x="false" class="srollColor">


							<view class="colorContentValue" v-for="(item,index) in colorList">

								<view class="colorContentValueItem" v-if="item.select" @click="selectColorNew(item)">
									<image src="/static/cuttingorder/xuanzhong.png" class="colorContentValueImg" v-if="item.colorName.length>3" :style="{width: item.colorName.length*28+'rpx'}"
										mode="">
									</image>
                  <image src="/static/cuttingorder/xuanzhong.png" class="colorContentValueImg" v-else
                         mode="">
                  </image>
									<text class="colorContentValueContent">{{item.colorName}}</text>

								</view>


								<view class="colorContentValueItem" v-else @click="selectColorNew(item)">

                  <image src="/static/cuttingorder/weixuanzhong.png" class="colorContentValueImg" v-if="item.colorName.length>3" :style="{width: item.colorName.length*28+'rpx'}"
                         mode="">
                  </image>
                  <image src="/static/cuttingorder/weixuanzhong.png" class="colorContentValueImg" v-else
                         mode="">
                  </image>
                  <text class="colorContentValueContentNoSelect">{{item.colorName}}</text>
								</view>



							</view>

						</scroll-view>
					</view>

					<!-- 颜色结束 -->



					<!-- 尺码开始 -->

					<view class="colorContent">

						<view class="colorContentText">
							<text class="colorContentTextTip">尺码</text>
							<text class="colorContentTextTipStart">*</text>
						</view>


						<scroll-view scroll-x="false" class="srollColor">


							<view class="colorContentValue" v-for="(item,index) in sizeListNew">

								<view class="colorContentValueItem" v-if="item.select" @click="selectSizeNew(item,index+1)">

									<image src="/static/cuttingorder/xuanzhong.png" class="colorContentValueImg" v-if="item.sizeName.length>3" :style="{width: item.sizeName.length*27+'rpx'}"
										mode="">
									</image>
                  <image src="/static/cuttingorder/xuanzhong.png" class="colorContentValueImg" v-else
                         mode="">
                  </image>
									<text class="colorContentValueContent">{{item.sizeName}}</text>

								</view>


								<view class="colorContentValueItem" v-else @click="selectSizeNew(item,index+1)">

									<image src="/static/cuttingorder/weixuanzhong.png" class="colorContentValueImg" v-if="item.sizeName.length>3" :style="{width: item.sizeName.length*27+'rpx'}"
										mode="">
									</image>
                  <image src="/static/cuttingorder/weixuanzhong.png" class="colorContentValueImg" v-else
                         mode="">
                  </image>
									<text class="colorContentValueContentNoSelect">{{item.sizeName}}</text>

								</view>



							</view>

						</scroll-view>
					</view>

					<!-- 尺码结束 -->




					<!-- 数据列表开始 -->
					<view class="contentList">
						<view class="contentListFrom" @click="resetForm()">重置表格</view>
						<view class="contentListFrom" @click="orderCount()">统计</view>

<!--						<view class="contentListItem">

							<view class="contentListItemInner" v-for="(item,index) in switList">
								<text class="contentListItemInnerText">{{item.name}}</text>
								<image src="/static/clock/dakai.png" mode="" class="contentListItemInnerImg" v-if="item.select==true" @click="switchClick(item)"></image>
								<image src="/static/clock/guanbi.png" mode="" class="contentListItemInnerImg" v-else @click="switchClick(item)"></image>
							</view>
							&lt;!&ndash; <view class="contentListItemInner">
								<text class="contentListItemInnerText">倍数模式</text>
								<image src="/static/clock/dakai.png" mode="" class="contentListItemInnerImg"></image>
							</view>
							<view class="contentListItemInner">
								<text class="contentListItemInnerText">打印层号</text>
								<image src="/static/clock/dakai.png" mode="" class="contentListItemInnerImg"></image>
							</view> &ndash;&gt;

						</view>-->

					</view>

					<view class="contentCenterTitle1"></view>
					<scroll-view scroll-x="true" class="srollColorData">
						<view class="dataContent">
							<view class="contentCenterTitle">
								<text class="contentCenterTitleTextone">#</text>
								<text class="contentCenterTitleText">扎数</text>
								<text class="contentCenterTitleText2">颜色</text>
								<text class="contentCenterTitleText" v-for="(item,index) in sizeListTable" @click="openBottom(item,index,'size')">{{index+1 +'_'+item.sizeName}}</text>

							</view>


							<view class="contentCenterList" v-for="(itemH,indexH) in colorListNewSelect">

								<input disabled="false" type="text" :value="indexH+1" class="contentCenterListInputText11"
									v-if="indexH%2!=0" />

								<input type="text" placeholder="数量" class="contentCenterListInput" v-if="indexH%2!=0"
									@input="inputDataZhaNum($event, indexH)" v-model="itemH.zhaNum" />

								<input disabled="false" type="text" placeholder="颜色" :value="itemH.colorName" @click="openBottom(itemH,indexH,'color')"
									class="contentCenterListInputTextD" v-if="indexH%2!=0 " />


								<input type="text" placeholder="数量" class="contentCenterListInput"
									v-for="(item,index) in sizeListNewSelect" v-if="indexH%2!=0 && item.row==indexH"
									@input="inputData($event, index,indexH,item,itemH)" v-model="item.num" />


								<!-- 偶数行底色不一样 -->
								<input disabled="false" type="text" :value="indexH+1"
									class="contentCenterListInputText11" v-if="indexH%2==0" />

								<input type="text" placeholder="数量" class="contentCenterListInput1" v-if="indexH%2==0"
									@input="inputDataZhaNum($event,indexH)" v-model="itemH.zhaNum" />

								<input disabled="false" type="text" placeholder="颜色" :value="itemH.colorName" @click="openBottom(itemH,indexH,'color')"
									class="contentCenterListInputTextS" v-if="indexH%2==0 " />


								<input type="text" placeholder="数量" class="contentCenterListInput1"
									v-for="(item,index) in sizeListNewSelect" v-if="indexH%2==0 && item.row==indexH"
									@input="inputData($event, index,indexH,item,itemH)" v-model="item.num" />

							</view>

						</view>
					</scroll-view>

					<!-- 数据列表结束 -->

				</view>

			</view>


		</scroll-view>


		<view class="loginContent1" id="mainBottom">

			<button @click="createOrder()" style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>

    <!--底部操作按键 点击列表弹出 start-->

    <!--颜色 尺码-->
    <uni-popup ref="popupBottom" type="bottom">
      <view class="bagDetail2" :style="{height: rowDataBottom.length*109+'rpx'}">

        <view class="baseList2" :style="{height: rowDataBottom.length*109+'rpx'}" v-for="(item,index) in rowDataBottom" @click="OperationClickBottom(item)">
          <view class="baseListItem2">
            <text class="baseListItemText2" v-if="index==0 && item.type=='color'" >当前颜色：{{listItemData.colorName}}</text>
            <text class="baseListItemText2" v-else-if="index==0 && item.type=='size'" >当前码：{{listRow+1 +'_'+listItemData.sizeName}}</text>
            <text class="baseListItemText2" v-else >{{item.title}}</text>
          </view>
          <view class="line" v-if="index!=0"></view>

          <view class="line_1" v-if="index==0"></view>
        </view>

      </view>
    </uni-popup>


    <!--行改颜色  列改码-->
    <uni-popup ref="popupTop" type="top">
      <view class="popupTopHeader">
        <uni-popup-dialog class="popupTopHeader" type="info" cancelText="关闭" confirmText="确定" :title="popupTopTitle" @close="closeTop" @confirm="colorTopConfirm">
          <view style="width: 100%;display: flex; align-items: center" v-if="listItemData.topType==='color'">
            <view>新颜色：</view>
            <uni-data-select style="width:160px;"
                             :localdata="colorListText"
                             v-model="colorTopData"
                             @change="colorTopChange"
                             label="选择新颜色"
                             emptyTips="暂无数据"
            ></uni-data-select>
          </view>
          <view style="width: 100%;display: flex; align-items: center" v-if="listItemData.topType==='size'">
            <view>新尺码：</view>
            <uni-data-select style="width:160px;"
                             :localdata="colorListText"
                             v-model="colorTopData"
                             @change="colorTopChange"
                             label="选择新尺码"
                             emptyTips="暂无数据"
            ></uni-data-select>
          </view>

          <view style="width: 100%;display: flex; align-items: center" v-if="listItemData.topType==='copy'">
            <view>复制其他列：</view>
            <uni-data-select style="width:160px;"
                             :localdata="colorListText"
                             v-model="colorTopData"
                             @change="colorTopChange"
                             label="选择其他列"
                             emptyTips="暂无数据"
            ></uni-data-select>
          </view>

        </uni-popup-dialog>
      </view>
    </uni-popup>

    <!--底部操作按键 点击列表弹出 end-->
	</view>
</template>

<script>
	import stringUtil from '@/pages/common/stringUtil.js';
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import {
		getColorGroupList,
		getColorManagerList,
		getSizeManagerList,
		getNumberOneManager,
		createOrder,
    updateOrder,
		getOrderOne
	} from '@/pages/api/api.js'
	import config from "@/pages/api/config";

	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
        // 底部操作按键列表
        rowDataBottom: [],
				// 选中的颜色列表
				colorListNewSelect: [],
				colorListNew: [],
				// 选中的尺码
				sizeListNewSelect: [],
				// 选中的扎数
				inputDataZhaNumList: [],
				sizeListNew: [],
				sizeListTable: [],
				login: '确定',
				title: '新建订单',
				isback: true,
				// 尺码列表
				sizeListData: [],
				colorList: [],
				colorListText: [],
        popupTopTitle: '当前颜色：',
        colorTopData: {},
				// 颜色外观列表
				colorListData: [],
				apiUrl: config.apiUrl,
				imgArr: [],
				listData: [
            {
						title: '编号',
						Value: '',
						tableFie: 'orderCode',
						type: 0
					},
					{
						title: '款号',
						Value: '',
						tableFie: 'styleName',
						type: 0
					},
					{
						title: '客户名称',
						Value: '',
						tableFie: 'customerName',
						type: 1
					},
					{
						title: '客户款式',
						Value: '',
						tableFie: 'customerStyle',
						type: 1
					},
					// {
					// 	title: '裁床单价',
					// 	Value: '',
					// 	tableFie: 'price',
					// 	type: 1
					// },
					// {
					// 	title: '裁床成本',
					// 	Value: '',
					// 	tableFie: 'cost',
					// 	type: 2
					// }
				],
				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,

				listDataGongxuDataTemp: [],
				storeId: '',
				tenantId: '',
				// 临时选中的尺码
				selectSizeTemp: {},
				// 分扎中是第几个对象 默认是第一个
				fenZhaIndex: 0,
				processData: [],
				styleData: [],
				orderId: '',
				img: '',
        listItemData: {},
        listRow: 0,
        orderType: 'save',
        orderData: {},
			}
		},
    create(){

    },
		onLoad(option) {
			const app = getApp();
			this.storeId = app.globalData.storeId
			this.tenantId = app.globalData.tenantId
			this.getSizeList();
			// this.getColorGroupList();
			this.getColorManagerList('')
      console.log('option',option)
      if(Object.keys(option).length !== 0){
        if (Object.keys(option.item).length !== 0) {
          let item = JSON.parse(decodeURIComponent(option.item));
          if(item.type==='copy'){
            console.log('订单复制');
            this.title = '复制新建订单';
            this.orderType = 'copy'
          }
          if(item.type==='update'){
            this.orderId = item.id
            console.log('订单修改');
            this.title = '修改订单';
            this.orderType = 'update'
          }
          this.getOrder(item.id)

          if (Object.keys(item.styleImgs).length !== 0) {
            this.imgArr.push(item.styleImgs)
          }
        }
      } else {
        this.listData.forEach(item => {
          if (item.tableFie == 'styleName') {
            if(item.Value===undefined || item.Value===null || item.Value===''){
              this.goStyleUrl()
            }
          }
        })
      }
		},
		onShow() {
			var that = this
			uni.$on('globleEvent', function(res) {
				// console.log('3422222', res.listSizeData) //  为 B 页面传过来的值
				that.styleData = res.listSizeData[0]
				console.log('选择款式返回数据', that.styleData) //  为 B 页面传过来的值
				// 移除监听事件
				uni.$off('globleEvent');
			})

			if (this.styleData != null) {
				this.listData.forEach(item => {
					if (item.tableFie == 'styleName') {
						item.Value = that.styleData.itemCode
					}
				})
				if (this.styleData.imgs) {
					this.imgArr.push(this.styleData.imgs)

				}
        // if(this.styleData.id!=undefined){
        //   this.getNumberOneManager(this.styleData.id)
        // }
			}


		},
		onReady() {

			// if ((!this.orderId || 0 === this.orderId.length)) {
			// 	this.AddGongxu()
			// 	this.AddFenZha()
			// }


			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);
				const app = getApp();

				this.scrollViewHeight = this.bottomTop - app.globalData.totalHeight
				// console.log('可滚动距离', this.scrollViewHeight,this.bottomTop,app.globalData.totalHeight);
			}).exec();
		},
		methods: {
      colorTopConfirm(){
        if(this.listItemData.topType==='color'){
          //改颜色
          this.listItemData = this.colorList.find(item=>{
            if(item.id === this.colorTopData){
              return item;
            }
          })
          this.colorListNewSelect[this.listRow] = this.listItemData;
        }else if(this.listItemData.topType==='size'){
          let methods = this.listItemData.methods
          this.listItemData = this.sizeListNew.find(item=>{
            if(item.id === this.colorTopData){
              return item;
            }
          })
          if(methods==='insert'){
            //插入一列
            let num = this.listRow+1;
            this.sizeListNewSelect.forEach((item,index)=>{
              if(item.colum>=num){
                item.colum = item.colum+1
              }
            })

            this.sizeListTable.splice(this.listRow,0,this.listItemData)
            console.log('sizeListNewSelect',this.sizeListNewSelect)

            const newArr = [...this.sizeListNewSelect];
            this.colorListNewSelect.forEach((row,index2)=>{
              let data = {
                size: this.listItemData.sizeName,
                sizeId: this.listItemData.id,
                select: this.listItemData.select,
                num: 0,
                row: index2, //行号
                colum: num, //列号
                color: row.colorName,
                colorId: row.id
              }
              newArr.forEach((item,index)=>{
                if(item.colum===num+1 && index2===item.row && item.color===row.colorName){
                  this.sizeListNewSelect.splice(index,0,data)
                }
              })

            })
          } else {
            //改码
            this.sizeListTable[this.listRow] = this.listItemData;
            this.sizeListNewSelect.forEach((item,index)=>{
              if(item.colum===this.listRow+1){
                item.sizeId = this.listItemData.id
                item.size = this.listItemData.sizeName
              }
            })
            console.log('sizeListNewSelect',this.sizeListNewSelect)
          }
        }else if(this.listItemData.topType==='copy'){
          //listRow = 当前列  colorTopData 选择要复制的列
          console.log('copy',this.listRow,this.colorTopData)
          let num = this.colorTopData+1
          const newArr = [...this.sizeListNewSelect];
          this.sizeListNewSelect.forEach((item,index)=>{
            if(item.colum === this.listRow+1){
              console.log('item',item)
              newArr.forEach((row,index2)=>{
                if(row.colum === num){
                  console.log('row2',row)
                  if(item.color === row.color){
                    item.num = row.num
                  }
                }
              })
            }
          })
        }

      },
      colorTopChange(e){
        console.log("colorTopChange:", e);
        this.colorTopData = e
      },
      // 打开弹框
      openTop(e,index) {
        this.$refs.popupTop.open('top')
        console.log('列表点击事件top', e,index);
        this.colorListText = []
        if(e.type==='color'){
          this.popupTopTitle = '当前颜色：'+this.listItemData.colorName
          this.colorList.forEach((item, index) => {
            let textData = {
              value: item.id,
              text: item.colorName
            }
            this.colorListText.push(textData);
          })
        }else if(e.type==='size'){
          let num = this.listRow+1
          this.popupTopTitle = '当前码：'+num +'_'+this.listItemData.sizeName
          this.sizeListNew.forEach((item, index) => {
            let textData = {
              value: item.id,
              text: item.sizeName
            }
            this.colorListText.push(textData);
          })
        }else if(e.type==='copy'){
          //复制其他列
          let num = this.listRow+1
          this.popupTopTitle = '当前列：'+num +'_'+this.listItemData.sizeName
          this.sizeListTable.forEach((item,index)=>{
            let textData = {
              value: index,
              text: index+1 +'_'+item.sizeName
            }
            this.colorListText.push(textData);
          })
        }
        this.listItemData.methods = e.methods
        this.listItemData.topType = e.type
      },
      // 关闭尺码弹框
      closeTop() {
        this.colorTopData = '';
        this.popupTopTitle = ''
        this.$refs.popupTop.close()
      },
      // 打开弹框
      openBottom(e,index,type) {
        console.log('点了');
        this.$refs.popupBottom.open('bottom')
        console.log('列表点击事件', e,index);
        this.listItemData = e
        this.listRow = index
        if(type === 'color'){
          this.rowDataBottom = [
            {
              title: '显示当前',
              type: 'color'
            },
            {
              title: '改颜色',
              type: 'color'
            },
            {
              title: '删除行',
              type: 'color'
            }
          ]
        }else if(type === 'size'){
          this.rowDataBottom = [
            {
              title: '显示当前',
              type: 'size'
            },
            {
              title: '删除列',
              type: 'size'
            },
            {
              title: '改码',
              type: 'size'
            },
            {
              title: '插入一列码',
              type: 'size',
              methods: 'insert'
            },
            {
              title: '改整列数量',
              type: 'size'
            },
            {
              title: '复制其他列数量',
              type: 'copy'
            }
          ]
        }


      },
      // 关闭尺码弹框
      closeBottom() {
        this.$refs.popupBottom.close()
      },
      // 点击 底部 操作按键
      OperationClickBottom(e) {
        switch (e.title) {
          case '删除行':
            uni.showModal({
              title: '提示',
              content: this.listItemData.colorName+'行,是否确认删除',
              showCancel: true,
              success: (res) => {
                if (!res.confirm) {
                  return
                }
                this.colorListNewSelect.splice(this.listRow,1);
                uni.showToast({
                  title: '删除行成功',
                  icon: 'none'
                });
                this.closeBottom()
              }
            })
            break;
          case '删除列':
            uni.showModal({
              title: '提示',
              content: this.listRow+1+'_'+this.listItemData.sizeName+'列,是否确认删除',
              showCancel: true,
              success: (res) => {
                if (!res.confirm) {
                  return
                }
                let selectList = this.sizeListNewSelect
                console.log('listRow',this.listRow)
                console.log('listItemData',this.listItemData)
                this.sizeListNewSelect = selectList.filter((item,index)=>item.colum !== this.listRow+1 && item.size !== this.listItemData.sizeName)
                console.log('sizeListNewSelect',this.sizeListNewSelect)
                this.sizeListTable.splice(this.listRow,1);
                uni.showToast({
                  title: '删除列成功',
                  icon: 'none'
                });
                this.closeBottom()
              }
            })
            break;
          case '改颜色':
            this.openTop(e,1)
            this.closeBottom()
            break;
          case '改码':
            this.openTop(e,1)
            this.closeBottom()
            break;
          case '插入一列码':
            this.openTop(e,1)
            this.closeBottom()
            break;
          case '复制其他列数量':
            this.openTop(e,1)
            this.closeBottom()
            break;
          case '取消':
            this.closeBottom()
            break;
          default:
            break;
        }
      },
			// 列表开关
			switchClick(item){
				this.switList.forEach((itemH)=>{
					if(item.name==itemH.name){
						itemH.select=!itemH.select
					}
				})

			},
			// 重置表格
			resetForm(){
				this.colorListNewSelect=[]
        this.sizeListTable = []
        this.sizeListNewSelect = []
				this.sizeListNew.forEach((inner, index) => {
					inner.select = false
				})
				this.colorList.forEach((inner, index) => {
					inner.select = false
				})
			},
      orderCount(){
        let data = {
          sizeListTable: this.sizeListTable,
          colorListNewSelect: this.colorListNewSelect,
          sizeListNewSelect: this.sizeListNewSelect,
        }
        uni.navigateTo({
          url: '/subPackA/cuttingOrder/cuttingOrderDetail/cuttingOrderCount?item='+encodeURIComponent(JSON.stringify(data)),
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      },

			// 录入扎数
			inputDataZhaNum(event, row) {
				console.log('输入值', row, event.target.value);
				var data = {
					zhaNum: event.target.value,
					row: row
				}
        this.colorListNewSelect[row].zhaNum = event.target.value;
			},

			// 录入尺码数量

			inputData(event, colum, row, item, itemH) {
        // this.sizeListNewSelect.forEach(entity=>{
        //   if(entity.row === row && entity.colum === colum+1){
        //     entity.num = event.target.value
        //   }
        // })
        this.sizeListNewSelect[colum].num = event.target.value

				console.log('11输入值', this.sizeListNewSelect);

			},

			// 选中行  单选
			chooseImg(index) {
				// 新增 choose 选中 字段 默认是false
				this.colorListNewSelect.forEach((itemH, indexH) => {
					if (index == indexH) {
						itemH.chooseLine = true
					} else {
						itemH.chooseLine = false
					}
				})
				//
				this.sizeListNewSelect.forEach((item, index) => {

					this.inputDataZhaNumList.forEach((zhaItem, zhaIndex) => {
						// 匹配赋值  扎数
						if (item.row == zhaItem.row) {
							this.$set(item, 'zhaNum', zhaItem.zhaNum)
						}
					})
				})
				var dataList = this.sizeListNewSelect.filter((item) => {
					return (item.row == index);
				});
				console.log('选中后的数据', dataList);
			},


			// 选择尺码点击事件
			selectSizeNew(item,index) {
				console.log('点击尺码', item,index);
        item.culoms = index
				this.sizeListTable.forEach((inner, index) => {
					if (inner.select) {
						inner.select = false
					}
				})
        item.select = true;
        this.sizeListTable.push(item)
        let length = this.sizeListTable.length
        this.colorListNewSelect.forEach((row,index2)=>{
          let data = {
            size: item.sizeName,
            sizeId: item.id,
            select: item.select,
            num: 0,
            row: index2, //行号
            colum: length, //列号
            color: row.colorName,
            colorId: row.id
          }
          this.sizeListNewSelect.push(data);

        })

			},


			// 选择颜色点击事件
			selectColorNew(item) {
				// 重置
				// this.colorListNewSelect = []
				console.log('点击颜色', item);
				this.colorList.forEach((inner, index) => {
					// 赋值
					if (inner.select) {
            inner.select = false
					}
				})
        item.select = true
        this.colorListNewSelect.push(item)
				// 新增 choose 选中 字段 默认是false
				this.colorListNewSelect.forEach((itemH, indexH) => {
					this.$set(itemH, 'chooseLine', false)
				})
        if(this.sizeListTable.length>0){
          let length = this.colorListNewSelect.length-1;
          this.sizeListTable.forEach((table,index)=>{
            let data = {
              size: table.sizeName,
              sizeId: table.id,
              select: table.select,
              num: 0,
              row: length, //行号
              colum: index, //列号
              color: item.colorName,
              colorId: item.id
            }
            this.sizeListNewSelect.push(data);
          })
        }
			},



			// 删除图片
			deleteImg(index) {
				// //删除操作 index数组中的下标，删除一个
				this.imgArr.splice(index, 1)

			},

			// 选择图片
			chooseImage() {
				let url = config.apiUrl
				console.log('url', url)
				let that = this
				uni.chooseImage({
					count: 1,
					// sizeType压缩图片
					sizeType: "compressed",
					success: (res) => {
						// this.imgArr =[...this.imgArr, res.tempFilePaths]
						// this.imgArr = this.imgArr.concat(res.tempFilePaths);
						console.log('xxxxxxxxx', res)
						uni.uploadFile({
							url: url + '/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {},
							header: {
								'Content-Type': 'multipart/form-data', // 对于文件上传，这个通常需要设置
								'Authorization': uni.getStorageSync('token') // 添加你的token头部参数
							},
							success: (res) => {
								console.log('图片上传', res)
								let obj = JSON.parse(res.data);
								console.log('obj', obj)
								if (obj.code == 200) {
									// img = obj.fileName
									that.imgArr.push(obj.fileName);
									console.log('imgArr', that.imgArr)
								}
							},
							fail: (error) => {
								console.log('图片上传失败', error)
								uni.showToast({
									title: '图片上传失败',
									icon: 'none'
								});
							}
						})
					}
				})

			},

			getOrder(id) {
				getOrderOne(id).then(res => {
					if (res.code == 200) {
						let data = res.data;
            this.orderData = data;
            this.styleData.id = data.styleId
            this.styleData.styleName = data.styleName
            let result = JSON.parse(data.result)
            console.log('result',result)
            this.colorListNewSelect = result.colorRow
            console.log('colorListNewSelect',this.colorListNewSelect)
            this.sizeListNewSelect = result.sizeLine
            console.log('sizeListNewSelect',this.sizeListNewSelect)
            this.sizeListTable = result.tableLine
						this.listData.forEach(item => {
							if (item.tableFie == 'styleName') {
								item.Value = data.styleName
							}
							if (item.tableFie == 'orderCode') {
								item.Value = data.orderCode
							}
							if (item.tableFie == 'customerName') {
								item.Value = data.customerName
							}
							if (item.tableFie == 'customerStyle') {
								item.Value = data.customerStyle
							}
						})
						// this.listDataGongxu.forEach(item=>{

						/*data.processList.forEach(item => {

							let data = []
							let gx = {
								title: '工序',
								Value: '',
								type: 4
							}
							data.push(gx)

							let gx2 = {}
							gx2.title = '工序名称',
								gx2.tableFie = 'processName',
								gx2.type = 2
							gx2.Value = item.processName
							data.push(gx2)

							let gx3 = {}
							gx3.title = '计件工价(元)',
								gx3.tableFie = 'wages',
								gx3.type = 1
							gx3.Value = item.processPrice
							data.push(gx3)
							let gongxuData = {
								data: data,
								id: item.id
							}
							this.listDataGongxu.push(gongxuData)
						})*/

						// this.listDataFenzha.forEach(item=>{

						/*data.splittingUpList.forEach(item => {
							let data = []
							let fz = {
								title: '扎号',
								Value: item.bundleCode,
								tableFie: 'bundleCode',
								type: 4
							}
							data.push(fz)
							let fz2 = {}
							fz2.title = '数量'
							fz2.tableFie = 'quantity'
							fz2.type = 0
							fz2.Value = item.quantity
							data.push(fz2)

							let fz3 = {}
							fz3.title = '尺码大小'
							fz3.tableFie = 'sizes'
							fz3.type = 2
							fz3.Value = item.sizes
							data.push(fz3)

							let fz4 = {}
							fz4.title = '颜色外观'
							fz4.tableFie = 'colors'
							fz4.type = 2
							fz4.Value = item.colors
							data.push(fz4)

							let fz5 = {}
							fz5.title = '床号批次'
							fz5.tableFie = 'batchs'
							fz5.type = 1
							fz5.Value = item.batchs
							data.push(fz5)
							console.log('fz', data)
							let fenzhaData = {
								data: data,
								id: item.id
							}
							this.listDataFenzha.push(fenzhaData)
						})*/

					}
				})
			},
			// 获取编号输入框的值
			onInputAccount(index, e) {
				this.listData[index].Value = e.target.value
			},

			isNumberOrDecimal(value) {
				return Number.isFinite(value) || /^-?\d*\.?\d+$/.test(value);
			},
			getNumberOneManager(id) {
				getNumberOneManager(id).then(res => {
					if (res.code == '200') {
						let processList = res.data.processList
						let splittingUpList = res.data.splittingUpList
						let that = this
						// let oneGongxu = this.oneGongxu
						this.listDataGongxu = []
						processList.forEach(item => {
							let oneGongxu = JSON.parse(JSON.stringify(that.oneGongxu));
							oneGongxu.forEach(row => {
								if (row.tableFie == 'processName') {
									row.Value = item.processName
								}
								if (row.tableFie == 'wages') {
									row.Value = item.processPrice
								}
							})
							let gongxuData = {
								data: oneGongxu
							}
							console.log('gongxuData', gongxuData)
							// 添加数据
							this.listDataGongxu.push(gongxuData)
						})
						//分扎
						this.listDataFenzha = []
						// let fenzhaList = this.fenzhaList;
						splittingUpList.forEach(item => {
							let fenzhaList = JSON.parse(JSON.stringify(that.fenzhaList));
							fenzhaList.forEach(row => {
								if (row.tableFie == 'bundleCode') {
									row.Value = item.bundleCode
								}
								if (row.tableFie == 'quantity') {
									row.Value = item.quantity
								}
								if (row.tableFie == 'sizes') {
									row.Value = item.sizes
								}
								if (row.tableFie == 'colors') {
									row.Value = item.colors
								}
								if (row.tableFie == 'batchs') {
									row.Value = item.batchs
								}
							})
							let fenzhaData = {
								data: fenzhaList
							}
							console.log('fenzhaData', fenzhaData)
							this.listDataFenzha.push(fenzhaData)
						})
					}
				})
			},
			// 选择具体颜色
			selectColorItem(item, index) {
				this.colorList.forEach((e, Index) => {
					// 表示点击选中
					if (Index == index) {
						e.select = true
						console.log('22点击颜色', e, item);
					} else {
						e.select = false
					}

				})
			},
			// 选择左侧颜色系列
			selectColor(item, index) {

        this.colorListData.forEach((e, Index) => {
          // 表示点击选中
          if (Index == index) {
            e.select = true
            console.log('121点击颜色', e, item);

            this.getColorManagerList(e.id)

          } else {
            e.select = false
          }
        })
      },
			getSizeList() {
				let data = {
					storeId: this.storeId,
					tenantId: this.tenantId
				}
				getSizeManagerList(data).then(res => {
					if (res.code == 200) {
						this.sizeListNew = res.data;
						//获取数据的时候foreach循环一下，添加select
						this.sizeListNew.forEach((item, index) => {
							this.$set(item, 'select', false)
						})

					}
				})
			},
			getColorGroupList() {
				let data = {
					storeId: this.storeId,
					tenantId: this.tenantId
				}
				getColorGroupList(data).then(res => {
					if (res.code == 200) {
						this.colorListData = res.data;
						if (this.colorListData.length > 0) {
							//获取数据的时候foreach循环一下，添加select
							this.colorListData.forEach((item, index) => {
								this.$set(item, 'select', false)
							})
							let color = this.colorListData[0];
							this.getColorManagerList(color.id)
						}
					}
				})
			},
			getColorManagerList(groupId) {
				let data = {
					storeId: this.storeId,
					tenantId: this.tenantId,
					groupId: groupId
				}
				getColorManagerList(data).then(res => {
					if (res.code == 200) {
						this.colorList = res.data;
						//获取数据的时候foreach循环一下，添加select
						this.colorList.forEach((item, index) => {
              let data = {
                id: item.id,
                colorCode: item.colorCode,
                colorName: item.colorName,
              }
              item = data
							this.$set(item, 'select', false)
						})
					}
				})
			},
			goUrl(data) {
				console.info('goUrl', data)
				if (data.title == '颜色') {
					let list = this.colorIds.split(",")
					let parmas = {
						storeId: this.storeId,
						tenantId: this.tenantId,
						selectList: list
					}
					uni.navigateTo({
						url: '/subPackA/colorManagement/colorSelect/colorListSelect?data=' + encodeURIComponent(
							JSON
							.stringify(parmas)),
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				if (data.title == '尺码') {
					let list = this.sizeIds.split(",")
					let parmas = {
						storeId: this.storeId,
						tenantId: this.tenantId,
						selectList: list
					}
					uni.navigateTo({
						url: '/subPack/sizeManagement/sizeSelect/sizeListSelect?data=' + encodeURIComponent(JSON
							.stringify(parmas)),
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			goStyleUrl() {
				uni.navigateTo({
					url: '/subPack/styleManagementNewSelect/styleManagementNewSelect',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			backOnClick() {
				uni.navigateBack({
					delta: 1
				});
				// console.log('点击返回');
			},
			createOrder() {
        console.log('colorListNewSelect',this.colorListNewSelect)
        console.log('sizeListNewSelect',this.sizeListNewSelect)
				if (this.imgArr != undefined && this.imgArr.length > 0) {
					this.img = this.imgArr[0]

				}
        let res = {
          colorRow: this.colorListNewSelect,
          sizeLine: this.sizeListNewSelect,
          tableLine: this.sizeListTable
        }
				let data = {
          id: '',
          styleId: '',
					styleName: '',
					styleImgs: this.img,
					orderCode: '',
					customerName: '',
					customerStyle: '',
					price: 0,
					cost: 0,
					tenantId: this.tenantId,
					storeId: this.storeId,
					processList: [],
					splittingUpList: [],
          result: JSON.stringify(res)
				}
				this.listData.forEach(item => {
					if (item.tableFie == 'styleName') {
						data.styleName = item.Value
					}
					if (item.tableFie == 'orderCode') {
            if(item.Value==''||item.Value==undefined){
              // 显示提示信息
              uni.showToast({
                title: '订单编号必填',
                icon: 'none'
              });
            }
						data.orderCode = item.Value
					}
					if (item.tableFie == 'customerName') {
						data.customerName = item.Value
					}
					if (item.tableFie == 'customerStyle') {
						data.customerStyle = item.Value
					}
					if (item.tableFie == 'price') {
						data.price = item.Value
					}
					if (item.tableFie == 'cost') {
						data.cost = item.Value
					}
				})
				/*this.listDataGongxu.forEach(item => {
					let gx = {
						processName: '',
						processPrice: '0.00',
					}
					item.data.forEach(row => {
						if (row.tableFie == 'processName') {
							gx.processName = row.Value
						}
						if (row.tableFie == 'wages') {
							gx.processPrice = row.Value
						}
					})
					data.processList.push(gx)
				})*/
        this.colorListNewSelect.forEach(item=>{
          let i = 0;
          this.sizeListNewSelect.forEach(row=>{
            if(item.id === row.colorId){
              i = i+1;
              let fz = {
                bundleCode: i,
                quantity: row.num,
                sizes: row.size,
                colors: item.colorName,
                batchs: item.zhaNum,
              }
              data.splittingUpList.push(fz)
            }
          })
        })

        if(this.orderType==='save'||this.orderType==='copy'){
          if (this.styleData != null) {
            data.styleId = this.styleData.id
          }
          console.log('createOrder', data)
          createOrder(data).then(res => {
            if (res.code == 200) {
              let pages = getCurrentPages();
              let prevPage = pages[pages.length - 2]; //上一个页面
              //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
              prevPage.setData({
                isRefresh: 1
              })
              this.backOnClick()
              // 显示提示信息
              uni.showToast({
                title: res.msg,
                icon: 'none'
              });
            }
          }).catch((err) => {
            console.log('新增失败', err);
          });
        } else if(this.orderType==='update'){
          data.id = this.orderData.id
          console.log('updateOrder', data)
          updateOrder(data).then(res => {
            if (res.code == 200) {
              let pages = getCurrentPages();
              let prevPage = pages[pages.length - 2]; //上一个页面
              //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
              prevPage.setData({
                isRefresh: 1
              })
              this.backOnClick()
              // 显示提示信息
              uni.showToast({
                title: res.msg,
                icon: 'none'
              });
            }
          }).catch((err) => {
            console.log('新增失败', err);
          });
        }


			},
		}
	}
</script>

<style lang="scss">
	.contentCenterTitleText1 {
		width: 150rpx;
		line-height: 90rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		border-right: #FFFFFF 0.1rpx solid;

		/* display: flex;
		justify-content: center;
		align-items: center; */

		display: inline-block;
		text-align: center;

	}

	.contentCenterListText {
		width: 100rpx;
		line-height: 90rpx;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 28rpx;
		// color: #FFFFFF;
		color: #000;


		/* display: flex;
	justify-content: center;
	align-items: center; */

		display: inline-block;

		text-align: center;
		background-color: #FF4E00;

	}

	.contentCenterTitleText {
		width: 100rpx;
		line-height: 90rpx;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 28rpx;
		// color: #FFFFFF;
		color: #FFFFFF;


		/* display: flex;
		justify-content: center;
		align-items: center; */

		display: inline-block;
		border-right: #FFFFFF 0.1rpx solid;
		text-align: center;
		// vertical-align: middle;
		// background-color: #FF4E00;


	}

  .contentCenterTitleTextone {
    width: 50rpx;
    line-height: 90rpx;

    font-family: HarmonyOS Sans SC;
    font-weight: 600;
    font-size: 28rpx;
    // color: #FFFFFF;
    color: #FFFFFF;


    /* display: flex;
    justify-content: center;
    align-items: center; */

    display: inline-block;
    border-right: #FFFFFF 0.1rpx solid;
    text-align: center;
    // vertical-align: middle;
    // background-color: #FF4E00;


  }


  .contentCenterTitleText2 {
    width: 160rpx;
    line-height: 90rpx;

    font-family: HarmonyOS Sans SC;
    font-weight: 600;
    font-size: 28rpx;
    // color: #FFFFFF;
    color: #FFFFFF;


    /* display: flex;
    justify-content: center;
    align-items: center; */

    display: inline-block;
    border-right: #FFFFFF 0.1rpx solid;
    text-align: center;
    // vertical-align: middle;
    // background-color: #FF4E00;


  }

	.contentCenterListNoImg1 {
		display: inline-block;
		width: 30rpx;
		height: 30rpx;

		padding-left: 60rpx;
		padding-right: 60rpx;
		padding-top: 30rpx;
		padding-bottom: 25rpx;
		background: #F9FCFF;
	}

	.contentCenterListNoImg {
		display: inline-block;
		width: 30rpx;
		height: 30rpx;

		padding-left: 60rpx;
		padding-right: 60rpx;
		padding-top: 25rpx;
		padding-bottom: 25rpx;

	}

	.contentCenterListInputText1 {
		display: inline-block;
		width: 100rpx;
		height: 90rpx;


		text-align: center;

		font-size: 28rpx;
		background: #F9FCFF;
	}
  .contentCenterListInputText11 {
    display: inline-block;
    width: 50rpx;
    height: 90rpx;


    text-align: center;

    font-size: 28rpx;
    background: #F9FCFF;
  }

  .contentCenterListInputTextS {
    display: inline-block;
    width: 160rpx;
    height: 90rpx;


    text-align: center;

    font-size: 28rpx;
    background: #F9FCFF;
  }

	.contentCenterListInputText {
		display: inline-block;
		width: 100rpx;
		height: 90rpx;


		text-align: center;

		font-size: 28rpx;
	}

  .contentCenterListInputTextD {
    display: inline-block;
    width: 160rpx;
    height: 90rpx;


    text-align: center;

    font-size: 28rpx;
  }


	.contentCenterListInput1 {
		display: inline-block;
		width: 90rpx;
		height: 70rpx;
		border: #EEEEEE 1rpx solid;

		text-align: center;
		margin: 5rpx;
		font-size: 28rpx;
		background: #F9FCFF;
	}

	.contentCenterListInput {

		display: inline-block;
		width: 90rpx;
		height: 70rpx;
		border: #EEEEEE 1rpx solid;

		text-align: center;
		margin: 5rpx;
		font-size: 28rpx;
	}

	.contentCenterList {
		width: 100%;
		height: 80rpx;
		display: inline-block;


	}

	.contentCenterTitle {

		/* 	display: flex;
		justify-content: center;
		align-items: center; */



		display: inline-block;

		width: 100%;
		height: 80rpx;
		align-items: center;





		// margin-top: 20rpx;

	}

	.contentListItemInnerImg{

		width: 80rpx;
		height: 40rpx;
	}
	.contentListItemInnerText{


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 30rpx;
		margin-right: 8rpx;
	}

	.contentListItemInner{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contentListItem{

		display: flex;
		justify-content: space-evenly;
		align-items: center;
		margin-top: 20rpx;

	}

	.contentListFrom{
		width: 142rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2px solid #0081FF;

		display: flex;
		justify-content: center;
		align-items: center;

		//margin-left: 468rpx;
		margin-top: 10rpx;
    margin-bottom: 10rpx;
		font-size: 24rpx;
		color: #0081FF;
    margin-left: 20rpx;
	}
	.contentList {
		display: flex;
		flex-direction: row;
		width: 100%;
		//height: 170rpx;
		background: #F5F7F9;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
    margin-top: 10rpx;
	}

	.contentCenterTitle1 {

		/* 	display: flex;
		justify-content: center;
		align-items: center; */



		// display: inline-block;

		width: 100%;
		height: 80rpx;
		background: #0081FF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;



		/* 	background-size: cover;
		background-repeat: no-repeat; */

		margin-bottom: -80rpx;



		// margin-top: 20rpx;

	}


	.srollColorData {

		width: 630rpx;
		white-space: nowrap;
		display: flex;

		margin-bottom: 50rpx;
	}

	.dataContent {

		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		flex-direction: column;






	}


	.colorContentValueItem {
		display: inline-block;

		align-items: center;
		font-weight: 600;
		font-size: 28rpx;
    width: 100rpx;
		margin-right: 18rpx;

		.colorContentValueImg {
      width: 100rpx;
			height: 45rpx;
			position: absolute;



		}


	}

	.colorContentValueContent {

		color: #0081FF;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 44rpx;



	}

	.colorContentValueContentNoSelect {
		display: flex;
		justify-content: center;
		align-items: center;
    width: 100rpx;
		height: 45rpx;
		color: #BBBBBB;
	}

	.srollColor {
		width: 460rpx;
		white-space: nowrap;
		height: 100rpx;
		display: flex;
	}

	.colorContentValue {
		/* display: flex;
		justify-content: start;
		align-items: center;
		flex-direction: row; */
		display: inline-block;
		margin-right: 20rpx;
    width: 100rpx;
		height: 100rpx;
		margin-top: 23rpx;





	}


	.colorContentText {

		display: flex;
		align-items: center;

		.colorContentTextTipStart {

			color: #FF4E00;
			line-height: 100rpx;
		}

		.colorContentTextTip {
			font-family: HarmonyOS Sans SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #333333;
			line-height: 100rpx;

			margin-left: 30rpx;
		}

	}

	.colorContent {
		display: flex;
		justify-content: space-between;
		align-items: center;

		width: 100%;
		height: 100rpx;
		background: #ffffff;
		border-radius: 20rpx;

		margin-top: 10rpx;
	}


	.baseListItemColorRight {

		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 500rpx;

		height: 100%;
		flex-wrap: wrap;

		// background-color: #0AE1C6;
	}

	.baseListItemColorLeftInnerText {

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.baseListItemColorLeftInnerTextSelect {


		font-weight: 600;
		font-size: 24rpx;

		line-height: 100rpx;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background-color: red;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.baseListItemColorLeftInnerBg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		margin-right: 18rpx;


	}

	.baseListItemColorLeftInnerItemSelect {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;

		border-radius: 20rpx;
	}

	.baseListItemColorLeftInnerItem {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;


		border-radius: 20rpx;

	}

	.baseListItemColorLeftInnerItemRight {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		width: 216rpx;
		height: 80rpx;
		background: #F5F7F9;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.baseListItemColorLeftInner {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		// justify-content: center;
		// align-items: center;

		width: 100%;
		height: 80rpx;
		margin-bottom: 20rpx;


	}

	.baseListItemColorLeft {
		display: flex;
		justify-content: flex-start;
		// align-items: center;
		flex-direction: column;
		width: 217rpx;
		height: 834rpx;
		background: #F5F7F9;

		border-radius: 20rpx;

	}

	.baseListItemColor {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		width: 750rpx;
		height: 834rpx;
		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;
	}


	.baseListItemText {

		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 217rpx;
		height: 80rpx;
		background: #F5F7F9;
		border-radius: 20rpx;

	}

	.baseListItemTextSelect {
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 217rpx;
		height: 80rpx;
		background: red;
		border-radius: 20rpx;
		border: red solid 1rpx;


	}



	.baseListItemColorRightItem {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		width: 100%;
		height: 100rpx;
		margin-left: 30rpx;

		// flex: 0 0 calc((100%)/2);




	}

	.baseListItem {
		display: flex;
		flex-direction: column;
		align-items: center;

		flex: 0 0 calc((100%)/3);
		margin-bottom: 20rpx;

	}


	.baseListColor {

		display: flex;
		flex-direction: column;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 29rpx;

	}

	.baseList {
		display: flex;
		flex-direction: row;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 29rpx;
	}

	.baseListColor {
		display: flex;
		flex-direction: row;
		width: 500rpx;
		flex-wrap: wrap;

	}




	.bagDetailUpadte {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		/* border-radius: 20rpx 20rpx 0 0; */
		/* background-color: white; */
	}

	.bagDetailColor {

		width: 750rpx;
		height: 1073rpx;


		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.bagDetail {
		width: 750rpx;
		height: 603rpx;
		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;





	}


	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;



	}

	.loginContent1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;

		position: absolute;
		bottom: 20rpx;


	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		margin-bottom: 20rpx;


		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;


		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}


	.contentAddBtnOut {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;

		.contentAddBtnInner {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 630rpx;
			height: 80rpx;
			background: #ECF5FD;
			border-radius: 20rpx;

			.contentAddBtnInnerImg {
				width: 22rpx;
				height: 22rpx;
			}

			.contentAddBtnInnerText {
				font-family: HarmonyOS Sans SC;
				font-weight: 600;
				font-size: 24rpx;
				color: #333333;
				line-height: 30rpx;
			}
		}

	}




	.content_gongxu {
		width: 630rpx;

		background: #F5F7F9;
		border-radius: 20rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;


	}



	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 500rpx;
		text-align: right;
	}

	.contentItemTextLeftStart {
		color: red;
	}

	.contentItemTextLeftStartImg {
		width: 30rpx;
		height: 30rpx;
		margin-right: 30rpx;
	}

	.contentItemRightContentImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;

	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}

	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 100%;
		height: 100rpx;


		/* background-color: aqua; */
	}



	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}


	.contentItemTextLeftContent {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItem {

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 100%;
		height: 100rpx;

		border-radius: 30rpx 30rpx 0 0;
		/* background-color: aqua; */

	}


	.contentItem4 {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* background-color: bisque; */
	}

	.labelContent {
		font-size: 20rpx;
		font-weight: 600;
	}

	.contentItem3 {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-evenly;
		width: 100%;
		height: 120rpx;

	}

	.listContent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 690rpx;

		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.listContentGongxu {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;

		background: #F5F7F9;
		border-radius: 30rpx;

	}

	.lineBottom {
		width: 100%;
		height: 30rpx;
		background: #FFFFFF;
	}

	.listContentGongxuContent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;

		background: #F5F7F9;
		border-radius: 30rpx;




	}


	.line {
		width: 100%;
		height: 1rpx;
		background: #EEEEEE;
	}

	.contentListOut {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		margin-top: 30rpx;
	}




	.contentImgAddBg {


		width: 190rpx;
		height: 190rpx;
		background: #F5F7F9;
		border-radius: 20rpx;



		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;


		.contentImgAdd {
			width: 40rpx;
			height: 40rpx;



		}

		.contentImg2 {


			width: 150rpx;
			height: 150rpx;




		}

		.contentImgDeleteBg {
			width: 50rpx;
			height: 50rpx;
			background: #FF4E00;
			border-radius: 20rpx;

			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 0rpx;
			right: 0rpx;

			.contentImgDelete {
				width: 30rpx;
				height: 30rpx;



			}


		}

		.contentText {
			width: 100%;
			text-align: center;
			font-family: HarmonyOS Sans SC;
			font-weight: 600;
			font-size: 18rpx;
			color: #999999;
			line-height: 120rpx;
		}
	}

	.contentOutInner {

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.contentOut {

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		width: 690rpx;

		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

	}

  .baseListItemText2 {

    font-size: 24rpx;
    color: #333333;
    line-height: 100rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .baseListItem2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100rpx;
    justify-content: center;

  }


  .baseList2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;

  }
  .bagDetail2 {
    width: 750rpx;
    height: 327rpx;
    background: #FFFFFF;
    border-radius: 55rpx 55rpx 0rpx 0rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .line_1 {
    width: 100%;
    height: 16rpx;
    background: #F8F8F8;
  }
  .line {
    width: 100%;
    height: 1rpx;
    background-color: #EEEEEE;
    /* background: #EEEEEE; */
  }


  .popupTopHeader {
    width: 100%;
    height: 425rpx;
    background: #FFFFFF;
    border-radius: 55rpx 55rpx 0rpx 0rpx;
    display: flex;
    flex-direction: inherit;
    align-items: flex-end;
    justify-content: center;
    //margin-top:var(--status-bar-height);
  }
</style>
